<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody">
			<!-- 页面內容 -->
			<view :style="{background: yinhang[0].bankinfo.back_color}" style="margin: 10rpx auto; width:670rpx;height:220rpx;box-shadow:0px 0px 15rpx 0px rgba(131,131,131,0.3);border-radius:20rpx;">
				<view :style="{backgroundImage: 'url('+yinhang[0].bankinfo.back_img+')'}" style="width:670rpx;height:300rpx;background-size:288rpx 166rpx; background-repeat:no-repeat;background-position-x: 357rpx;background-position-y: 75rpx;">
					<view style="position: relative;top: 30rpx;left: 30rpx;">
						<view class="grace-rows" style="position: relative;bottom: 10rpx;">
							<image :src="yinhang[0].bankinfo.bank_icon_url" style="width: 50rpx;height: 50rpx;"></image>
							<view class="grace-columns" style="margin-left: 22rpx; position: relative;width: 300rpx;">
								<text style="margin-bottom: 2rpx; font-size:30rpx;font-weight:400;color:rgba(255,255,255,1);">{{ yinhang[0].bankinfo.name }}</text>
								<image src="../../static/xinyongka.png" style="width: 60rpx;height: 22rpx;"></image>
							</view>
						</view>
						<view style="width:598rpx;height:1rpx;background:rgba(247,247,247,1);"></view>
						<view class="grace-rows">
							<view class="grace-columns" style="text-align: center;margin: 21rpx 50rpx;">
								<text style="font-size:26rpx;font-weight:400;color:rgba(255,255,255,1);">账单日</text>
								<text style="font-size:26rpx;font-weight:400;color:rgba(255,255,255,1);">{{yinhang[0].billing_day}}日</text>
							</view>

							<view class="grace-columns" style="text-align: center;margin: 21rpx 70rpx;">
								<text style="font-size:26rpx;font-weight:400;color:rgba(255,255,255,1);">还款日</text>
								<text style="font-size:26rpx;font-weight:400;color:rgba(255,255,255,1);">{{yinhang[0].repayment_date}}日</text>
							</view>

							<view class="grace-rows" style="text-align: center;margin:10rpx 0rpx;">
								<text style="font-size:70rpx;font-weight:bold;color:rgba(255,255,255,1);">{{yinhang[0].shenyu}}</text>
								<view class="grace-columns" style="margin-top: 10rpx;">
									<text style="font-size:26rpx;font-weight:400;color:rgba(255,255,255,1);">天到期</text>
									<text style="font-size:26rpx;font-weight:400;color:rgba(255,255,255,1);">({{yinhang[0].times}})</text>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>

			<view class="grace-rows" style="width:750rpx;height:90rpx;background:rgba(255,255,255,1);line-height: 90rpx;">
				<text style="margin-left: 35rpx; font-size:32rpx;font-weight:400;color:rgba(79,159,254,1);">往期计划</text>
				<text style="margin-left: 20rpx; color:rgba(79,159,254,1) ;">|</text>
				<text style="margin-left: 20rpx; color: #FF6600;font-size: 32rpx;">T</text>
				<text style="color: #4F9FFE;font-size: 32rpx;">o</text>
				<text style="margin-left: 10rpx; color: #FF6600;font-size: 32rpx;">P</text>
				<text style="color: #4F9FFE;font-size: 32rpx;">lan</text>
			</view>
			<view @tap="details(item.id)" v-for="(item,index) in plan_list" :key="index" style="margin-top: 10rpx; width:750rpx;height:250rpx;background:rgba(255,255,255,1);">
				<view class="" style="margin-left: 25rpx;top: 10rpx;position: relative;">
					<view class="grace-rows">
						<image src="../../static/preview_plan_rili.png" style="position: relative;top: 5rpx; width: 30rpx;height: 30rpx;"></image>
						<text style="margin-left: 30rpx; font-size:30rpx;font-weight:400;color:rgba(51,51,51,1);">{{ item.create_time }}</text>
					</view>
					<view class="grace-rows" style="margin-left: 25rpx;">
						<view class="grace-columns" style="width: 450rpx;">
							<text style="font-size:24rpx;font-weight:400;color:rgba(51,51,51,1);margin-top: 7rpx;">还款总金额：{{ item.bill_money }}元</text>
							<text style="font-size:24rpx;font-weight:400;color:rgba(51,51,51,1);margin-top: 7rpx;">启动金额：{{ item.rp_price }}元</text>
							<text style="font-size:24rpx;font-weight:400;color:rgba(51,51,51,1);margin-top: 7rpx;">自动分期还款：{{ item.num }}次</text>
							<text style="font-size:24rpx;font-weight:400;color:rgba(51,51,51,1);margin-top: 7rpx;">已执行：{{ item.yihuan_num }}次</text>
							<text style="font-size:24rpx;font-weight:400;color:rgba(51,51,51,1);margin-top: 7rpx;">计划截止日期：{{ item.end_time }}</text>
						</view>
						<view>
							<button :style="{border:item.rp_state==='已终止'?'2rpx solid rgba(153,153,153,1)':item.rp_state==='已暂停'?'2rpx solid rgba(255, 0, 0, 255)':item.rp_state==='已完成'?'2rpx solid rgba(8,214,8,1)':item.rp_state==='执行中'?'2rpx solid rgba(255, 170, 0, 255)':'2rpx solid rgba(153,153,153,1)',color:item.rp_state==='已终止'?'rgba(153,153,153,1)':item.rp_state==='已暂停'?'rgba(255, 0, 0, 255)':item.rp_state==='已完成'?'rgba(8,214,8,1)':item.rp_state==='执行中'?'rgba(255, 170, 0, 255)':'rgba(153,153,153,1)' }"
							 style="margin-top: 50rpx; width:180rpx;height:60rpx;border-radius:20rpx; font-size:30rpx;font-weight:400;line-height: 60rpx;">
								{{ item.rp_state }}
							</button>
						</view>
					</view>
				</view>
			</view>

			<ourLoading active text="加载中..." v-if="!loadings" />
		</view>
	</gracePage>
</template>

<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	export default {
		data() {
			return {
				button_color:'',//按钮颜色
				loadings: false,
				page: 1,
				limit: 20,
				plan_list: [], // 还款记录列表
				yinhang: {}, // 银行卡信息数据
				id: '' // 银行卡id
			}
		},
		onLoad: function(opt) {
			this.id = opt.id;
			this.yinhang = uni.getStorageSync('yinhang')
			this.get_info();
		},
		onShow() {
			this.button_color = uni.getStorageSync('button_color');
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.get_info();
		},
		onReady() {
			var vm = this;

			setTimeout(function() {
				vm.loadings = true
			}, 500)
		},
		methods: {
			// 获取还款记录列表
			get_info() {
				var vm = this;
				var page = this.page;
				if (page == 0) {
					uni.showToast({
						title: '没有更多',
						icon: 'none'
					})
					return
				}
				vm.myPost(
					'api/agentrepayment/get_big_order', {
						page: page,
						limit: vm.limit,
						card_id: vm.id
					},
					function(res) {
						console.log(res);
						if (res.code == 200) {
							var datas = res.data.data;
							if (datas.length < vm.limit) {
								vm.page = 0;
							} else {
								vm.page = page + 1;
							}
							console.log(datas);
							var plan_list = vm.plan_list;
							vm.each(datas, function(item) {
								plan_list.push(item)
							})
							vm.plan_list = plan_list
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}

					}
				)

			},
			// 计划详情页面跳转事件
			details(id){
				uni.navigateTo({
					url: '/pages/Repayment/details_of_previous_plans?id=' + id
				})
			}
		},
		components: {
			gracePage
		}
	}
</script>

<style>
</style>


<!-- .grace-flex // 声明 flex
.grace-rows // flex 横向
.grace-columns  //flex 竖向
.grace-wrap //flex 自动换行
.grace-nowrap //flex 横向不换行
.grace-space-between //flex 横向两端对齐
.grace-flex-end //flex 横向右对齐
.grace-flex-center  //flex 横向居中
.grace-flex-top  //flex 垂直顶端对齐
.grace-flex-vcenter //flex 垂直居中对齐
.grace-flex-bottom //flex 垂直底部对齐
.grace-no-scale //元素不缩放 -->
